<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
        body, html {
            background-color: #E5E5E5;
        }

        /*banner*/
        .swipe {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap {
            overflow: hidden;
            position: relative;
            height: 165px;
        }

        .swipe-wrap > div {
            float: left;
            width: 100%;
            position: relative;
        }

        .swipe-wrap > div {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap img {
            width: 100%;
            height: 165px;
            max-height: 240px;
            min-height: 132px;
            min-width: 320px;
            max-width: 640px;
        }

        #slide {
            margin: 0 auto;
            position: relative;
        }

        #pointer {
            position: absolute;
            bottom: 0px;
            overflow: hidden;
            width: 92%;
            text-align: right;
        }

        #pointer a {
            display: inline-block;
            width: 3px;
            height: 3px;
            border-radius: 3px;
            margin-right: 4px;
            background-color: #9B9B9B;
            margin-bottom: 1.5px;
        }

        #pointer a.active {
            width: 6px;
            height: 6px;
            background-color: #000000;
            margin-bottom: 0;
        }

        .banner-lable {
            position: relative;
            line-height: 17px;
            font-size: 13px;
            padding: 5px 10px 0 10px;
        }
        #btns_box {
            width: 100%;
            height: 172px;
            overflow: hidden;
        }

        #btns_box .act_btn {
            color: #F4B800;
            width: 48%;
            display: inline-block;
            float: left;
            text-indent: -1000em;
            margin-bottom: 10px;
        }

        #btns_box .event_2 {
            float: right;
            margin-bottom: 10px;
        }

        #btns_box .event_3 {
        }

        #btns_box .event_4 {
            float: right;
        }

        #btns_box .event_1 {

        }
        #act_detail_box {
            width: 100%;
            margin-top: 10px;
        }

        #act_detail_box .act_detail_btn {
            width: 100%;
            position: relative;
            margin-bottom: 10px;
        }

        #act_detail_box img {
            display: block;
            width: 100%;
        }

        #act_detail_box .statu {
            position: absolute;
            color: #FFF;
            left: 0;
            top: 0;
            width: 85px;
            height: 21px;
            text-align: center;
            line-height: 21px;
        }

        #act_detail_box .ing {
            background-color: #0084FF;

        }

        #act_detail_box .end {
            background-color: #617488;
        }
    </style>
</head>
<body>

<div id='slide' class='swipe'>
    <div class='swipe-wrap' id="banner-content">
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/4.png"/>
        </div>
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/5.png"/>
        </div>
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/6.png"/>
        </div>
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/7.png"/>
        </div>
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/8.png"/>
        </div>
        <div onclick="" tapmode="" data-value="apicloud重新定义移动应用开发">
            <img src="../image/9.png"/>
        </div>
    </div>

</div>
<div class="banner-lable">
    <span id="banner-title">apicloud重新定义移动应用开发</span>

    <div id="pointer">
        <a class="active"></a>
        <a class=""></a>
        <a class=""></a>
        <a class=""></a>
        <a class=""></a>
        <a class=""></a>
    </div>
</div>
<!-- 敬请期待等 -->
<div id="btns_box">
    <img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_1">
    <img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_2">
    <img src="../image/1.png" tapmode onclick="" alt="" class="act_btn event_3">
    <img src="../image/1.png" alt="" class="act_btn event_4">
</div>
<!-- 活动详情按钮 -->
<div id="act_detail_box">
    <div class="act_detail_btn">
        <span class="statu ing">云api</span>
        <img src="../image/10.png" alt="111">
    </div>
    <div class="act_detail_btn">
        <span class="statu end">端api</span>
        <img src="../image/11.png" alt="111">
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
    function initSlide() {
        var $pointer = $api.byId('pointer');
        window.mySlide = Swipe(slide, {
            continuous: true,
            disableScroll: true,
            stopPropagation: true,
            callback: function (index, element) {
                var $actA = $api.dom($pointer, 'a.active');
                $api.removeCls($actA, 'active');
                $api.addCls($api.eq($pointer, index + 1), 'active');
                $api.html($api.byId('banner-title'), $api.attr(element, 'data-value'))
            },
            transitionEnd: function (index, element) {
            }
        });
    }
    initSlide();
</script>
</html>